<template>
	<div  class="container">
		<el-page-header @back="goBack" content="管理员设置"></el-page-header>

		<el-row type="flex" justify="space-between" class="nav-bar">
			<el-col :span="3">
				<el-button type="primary" @click="create" v-show="utils.checkAdminPermission('系统设置.管理员设置.新建')">新建</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column prop="name" label="管理员名称">
			</el-table-column>
			<el-table-column prop="sysroles" label="角色" width="150">
				<template slot-scope="scope">
					<span>{{scope.row.sysrole.name}}</span>
				</template>
			</el-table-column>
      <el-table-column prop="department" label="所属部门" width="100">
      	<template slot-scope="scope">
      		<span>{{scope.row.department.name}}</span>
      	</template>
      </el-table-column>
			<el-table-column prop="mobile" label="联系电话" width="200">
			</el-table-column>
			<el-table-column prop="email" label="联系邮箱" width="200">
			</el-table-column>
			<el-table-column prop="isreceive" label="是否接收短信" width="150">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.isreceive == '是'">{{scope.row.isreceive}}</span>
					<span class="color-danger" v-if="scope.row.isreceive == '否'">{{scope.row.isreceive}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="状态" width="150">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已启用'">{{scope.row.state}}</span>
					<span class="color-danger" v-if="scope.row.state == '已冻结'">{{scope.row.state}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="180">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row)" type="text" size="small" v-show="utils.checkAdminPermission('系统设置.管理员设置.编辑')">编辑</el-button>
					<!-- <el-button @click="create(scope.row)" type="text" size="small">修改</el-button> -->
					<el-button @click="del(scope.row.id)" type="text" size="small"  v-show="utils.checkAdminPermission('系统设置.管理员设置.删除')">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<el-dialog :title="dialogType=='add'?'新建管理员':'编辑管理员'" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="管理员名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="form.password" type="password" placeholder="填写代表修改密码"></el-input>
				</el-form-item>
        <el-form-item label="角色" prop="departmentid">
        	<el-select v-model="form.sysroleid" placeholder="请选择角色">
        		<el-option
        			v-for="(item,index) in sysroles"
        			:key="item.id"
        			:label="item.name"
        			:value="item.id">
        		</el-option>
        	</el-select>
        </el-form-item>
				<el-form-item label="部门分类" prop="departmentid">
					<el-select v-model="form.departmentid" placeholder="请选择部门分类">
						<el-option
							v-for="(item,index) in departmentType"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="手机号码" prop="mobile">
					<el-input v-model="form.mobile"></el-input>
				</el-form-item>
				<el-form-item label="联系邮箱" prop="email">
					<el-input v-model="form.email"></el-input>
				</el-form-item>
				<!-- <el-form-item label="头像">
					<el-upload class="avatar-uploader" :show-file-list="false":action="fileUploadURL" :headers="headers"
						:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="form.photo != ''" :src="+form.photo" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item> -->
				<el-form-item label="是否接收短信" prop="isreceive">
					<el-radio-group v-model="form.isreceive">
						<el-radio label="是"></el-radio>
						<el-radio label="否"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-radio-group v-model="form.state">
						<el-radio label="已启用"></el-radio>
						<el-radio label="已冻结"></el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitType">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		layout: 'admin',
    head() {
      return {
          title:'管理员设置-' + this.websetting.name
      }
    },
		data() {
			return {
				key: '',
				page: 1,
				pageSize: 10,
				loading: false,
				total: 0,
				dialogVisible: false,
				dialogType: 0,
				form: {
					name: '',
					password: '',
					departmentid: '',
          sysroleid:'',
					mobile: '',
					email: '',
					photo: '',
					state: '已启用',
					isreceive:'是'
				},
				rules:{
					name: [
						{ required: true, message: '请输入管理员名称', trigger: 'blur' }
					],
					password: [
						// { required: true, message: '请输入管理员密码', trigger: 'blur' },
						{ min: 6, message: '密码长度必须大于6个字符', trigger: 'blur' }
					],
					departmentid: [
						{ required: true, message: '请选择部门分类', trigger: 'change' }
					]
				},
				tableData: [],
				imageUrl: '',
				departmentType: [],
        sysroles:[],
			}
		},
		mounted() {
			this.getList()
			this.getDepartmentType()
      this.getRolelist();
			console.log(this.$store.state.header)
		},
    computed: {
      headers() {
        return this.$store.state.header
      }
    },
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			getList() {
				this.$axios.post('/admin/list', {
					"PageIndex": this.page,
					"PageSize": this.pageSize,
					"Key": this.key
				}).then((res) => {
					this.tableData = res.rows;
					this.total = res.total
				})
			},
			submitType() {
				let api = ''
				if (this.dialogType == 'add') {
					api = '/admin/create'
				}
				if (this.dialogType == 'edit') {
					api = '/admin/edit'
				}
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.$axios.post(api, this.form).then((res) => {
							this.$message.success(res.msg);
							this.dialogVisible = false;
							this.getList()
						})
					} else {
						return false;
					}
				})
			},
			create() {
				this.dialogType = 'add'
				this.dialogVisible = true
				this.form = {
					name: '',
					password: '',
					departmentid: '',
          sysroleid:'',
					mobile: '',
					email: '',
					photo: '',
					state: '已启用',
					isreceive:'是'
				}
			},
			edit(row) {
				this.dialogType = 'edit'
				this.dialogVisible = true
				this.form.id = row.id
				this.form.name = row.name
				this.form.password = row.password
				this.form.departmentid = row.department.id
        this.form.sysroleid = row.sysrole.id
				this.form.mobile = row.mobile
				this.form.email = row.email
				this.form.photo = row.photo
				this.form.state = row.state
				this.form.isreceive = row.isreceive
			},
			search() {
				this.getList()
			},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			del(id) {
				this.$confirm('此操作将删除该管理员, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/admin/delete?Ids=' + id).then((res) => {
						this.$message.success(res.msg);
						this.getList()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
      getRolelist(){
      	this.$axios.post('/role/list', {
      		"PageIndex": 1,
      		"PageSize": 99999,
      		"Key": ''
      	}).then((res) => {
      		this.sysroles = res.rows;
      	})
      },
			getDepartmentType(){
				this.$axios.post('/department/list', {
					"PageIndex": 1,
					"PageSize": 99999,
					"Key": ''
				}).then((res) => {
					this.departmentType = res.rows;
				})
			},
			handleAvatarSuccess(res, file) {
        if(res.msg)
        {
          this.$message.error(res.msg);
          return;
        }
				this.imageUrl = URL.createObjectURL(file.raw); //临时目录
				this.form.photo = file.response.path
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isLt2M;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		padding: 45px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}

	.avatar-uploader {
		.el-upload {

			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;

			&:hover {
				border-color: #409EFF;
			}
		}

		.avatar-uploader-icon {
			border: 1px dashed #d9d9d9;
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
</style>
